<script lang="ts" setup>
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  const key = computed(() => {
    return route.path || route.fullPath;
  });
</script>

<template>
  <section class="app-main">
    <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in" appear>
        <!-- <keep-alive> -->
        <component :is="Component" :key="key" />
        <!-- </keep-alive> -->
        <!-- <keep-alive v-if="openCache" :include="getCaches">
          <component :is="Component" :key="key" />
        </keep-alive>
        <component v-else :is="Component" :key="key" /> -->
      </transition>
    </router-view>
  </section>
</template>

<style lang="scss" scoped>
  .app-main {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--g-navigationbar-height));
    padding: 16px;
    overflow: hidden;
  }

  .fixed-header + .app-main {
    // padding-top: var(--g-navigationbar-height);
    // height: 100vh;
    // overflow: auto;
  }

  .hasTagsView {
    .app-main {
      min-height: calc(100vh - var(--g-header-height));
    }

    .fixed-header + .app-main {
      // padding-top: var(--g-header-height);
    }
  }
</style>
